<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <el-form :model="queryForm" ref="queryForm" :inline="true">

            <el-form-item label="类型" prop="title">
                <el-select class="item-choose" v-model="type" size="small">
                    <el-option
                            v-for="(item,index) in options"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                    ></el-option>
                </el-select>

            </el-form-item>

            <el-form-item label="内容" prop="title">
                <el-input
                        v-model="queryForm.title"
                        placeholder="请输入内容"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />

            </el-form-item>


            <el-form-item label="手机号" prop="mobile">

                <el-input
                        v-model="queryForm.mobile"
                        placeholder="请输入手机号"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">清空</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">

            <el-col :span="1.5">
                <el-select class="item-choose" v-model="value" size="small" style="margin-left: 20px">
                    <el-option
                            v-for="(item,index) in options"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                    ></el-option>
                </el-select>
            </el-col>

            <el-col :span="1.5">
                <el-input
                        v-model="fetchPage"
                        placeholder="请输入采集页数"
                        clearable
                        size="small"
                />
            </el-col>


            <el-col :span="1.5">
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                >
                    数据采集
                </el-button>
            </el-col>

        </el-row>

        <el-table
                v-loading="loading"

                :data="tableData"
                :header-cell-style="{'text-align':'center','color':'grey','font-weight':'600'}"
                :cell-style="{'text-align':'center'}" border style="margin-top: 10px"
        >
            <el-table-column type="index" label="序号" width="100px"></el-table-column>
            <el-table-column prop="businessTitle" label="内容" show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="businessTime" label="发布时间"></el-table-column>
            <el-table-column prop="mobile" label="手机号"></el-table-column>
            <el-table-column prop="businessPrice" label="价格"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="contacts" label="称呼"></el-table-column>

        </el-table>


        <el-pagination
                background
                :page-sizes="[10, 20, 30, 40,50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-size.sync="pageSize"
                :current-page.sync="currentPage"
                @size-change="handleQuery"
                @current-change="handleQuery"
                style="float: right;margin-top: 10px"
        />
    </template>
</div>
</body>

<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>


<script>

    new Vue({
        el: '#app',
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                open: false,
                tableData: [],
                title: "",
                fetchPage: "",
                type: "0",
                formData: {},
                options: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '23',
                        label: '环氧地坪'
                    }, {
                        value: '10',
                        label: '集装箱活动板房'
                    }, {
                        value: '15',
                        label: '灯'
                    },
                    {
                        value: '18',
                        label: '净化工程'
                    },
                    {
                        value: '20',
                        label: '冷库-制冷系列'
                    },
                    {
                        value: '21',
                        label: '石材'
                    },
                    {
                        value: '3',
                        label: '膜结构-推拉雨棚'
                    }],
                value: '3',
                button: {
                    add: false,
                    update: false,
                    delete: false,
                    imports: false,
                    export: false
                },
                rules: {
                    userName: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择', trigger: 'blur'}
                    ],
                    birthDate: [
                        {required: true, message: '请选择', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 11, max: 11, message: '手机号码格式不正确', trigger: 'blur'}
                    ]
                },
                loading: false,
                roleList: [],
                queryForm: {
                    title: '',
                    mobile: ''
                }
            }
        },
        created() {
            this.handleQuery();
        },
        methods: {
            handleCurrentChange(val) {
                this.currentPage = val;
                this.handleQuery();
            },
            getRoleList() {
                requests.post('/sys/role/all')
                    .then((res) => {
                        if (res.code === '200') {
                            this.roleList = res.data;
                        }
                    });
            },
            resetQuery() {
                this.queryForm = {}
                this.handleQuery()
            },
            submitForm() {
                addOrUpdate('/sys/user/add', this);
            },
            cancel() {
                this.open = false
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.handleQuery();
            },
            formatSex: function (row, column, cellValue, index) {
                return row.sex == 1 ? '男' : row.sex == 2 ? '女' : '未知';
            },
            formatRole: function (row, column, cellValue, index) {
                if (cellValue != null) {
                    let role = new Array();
                    cellValue.forEach(function (val, index, arr) {
                        role.push(val.roleName);
                    });
                    return role.toString();
                }
            },
            handleQuery() {
                let queryParam = {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    type: this.type,
                    title: this.queryForm.title,
                    mobile: this.queryForm.mobile,
                };
                this.loading = true
                requests.post("sys/resourceInfo/pageList", queryParam)
                    .then((res) => {
                        if (res.code === '200') {
                            this.loading = false
                            if (res.data.list) {
                                this.tableData = res.data.list;
                                this.total = Number(res.data.count);
                            } else {
                                this.tableData = res.data;
                            }
                        }
                    });
            },
            handleDelete(row) {
                deleteById('/sys/user/delete/' + row.id, this);
            },
            handleAdd() {
                console.log(this.value)
                let queryParam = {}
                queryParam.type = this.value;
                queryParam.page = this.fetchPage
                if (this.fetchPage === '' || this.fetchPage === undefined) {
                    this.$notify({
                        title: '失败',
                        message: '采集页数不能为空',
                        type: 'error'
                    });
                    return
                }
                requests.post("sys/resourceInfo/fetchData", queryParam)
                    .then((res) => {
                        if (res.code === '200') {
                            this.loading = false
                            this.$notify({
                                title: '成功',
                                message: '数据采集成功',
                                type: 'success'
                            });
                        }else {
                            this.loading = false
                            this.$notify({
                                title: '失败',
                                message: res.message,
                                type: 'error'
                            });
                        }
                    });


            },
            handlePageList() {
                let queryParam = {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    type: 3,
                    title: this.queryForm.title,
                    mobile: this.queryForm.mobile,
                };
                requests.post("sys/resourceInfo/pageList", queryParam)
                    .then((res) => {
                        if (res.code === '200') {
                            if (res.data.list) {
                                this.tableData = res.data.list;
                                this.total = Number(res.data.count);
                            } else {
                                this.tableData = res.data;
                            }
                        }
                    });
            },

            handleUpdate(row) {
                openPage('修改用户', '/sys/userUpdate/index?id=' + row.id, this);
            },
            handleImport() {
                openPage('导入用户', '/sys/userImport/index', this);
            },
            handleExport() {
                let queryParam = {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    userName: this.queryForm.userName,
                    realName: this.queryForm.realName,
                    phone: this.queryForm.phone
                };
                exports('/sys/user/export', queryParam);
            }
        }
    });
</script>
<style>


</style>
</html>
